<template>
	<view class="address_choose_box Column">
		<!-- 渲染收货信息的盒子 -->
		<view class="addressInfoBox Column">
			<view v-if="addressList.length != 0">
				<view class="rowChild Column" v-for="(item,index) in addressList" :key="index" :data-id="item.id"
					@click="setDefault">
					<view class="Row justifyCont-bet">
						<view class="rowChild_left Column">
							<view class="rowChild_head Row">
								<view class="username fontW">{{item.name}}</view>
								<view class="phone fontW">{{item.mobile}}</view>
								<view class="default" v-if="item.id == defaultAddress">默认</view>
								<view class="setDefault" v-else>设为默认</view>
							</view>

							<view class="rowChild_foot">
								{{item.province}} {{item.city}} {{item.district}}
								{{item.detail}}
							</view>
						</view>
						<!-- 编辑地址 -->
						<view class="edit" @click.capture.stop="edit(item.id)">
							<u-icon name="edit-pen" color="#0056FF" size="32"></u-icon>
						</view>
					</view>

					<view class="flex-row justify-end">
						<!-- 删除 -->
						<view class="del" :data-id="item.id" @click.capture.stop="showModal">删除</view>
					</view>
				</view>
			</view>

			<view class="content" v-else>还未添加地址</view>
		</view>

		<!-- 选择收货地址的盒子 -->
		<navigator class="addressChoose Row" url="./addAddress/addAddress">
			<button style="background: #0056FF;" type="primary" size="mini" class="btn">新增收货地址</button>
		</navigator>

		<u-modal :show="quitPopup" :title="title" ref="uModal" :asyncClose="true" showCancelButton @confirm="del"
			@cancel="cancel"></u-modal>
	</view>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	import {
		apiAddressList,
		apiDelAddress
	} from '@/api/order.js';

	export default {
		data() {
			return {
				defaultAddress: uni.getStorageSync("defaultAddress"),
				addressList: [],
				current_page: 1,
				last_page: 1,

				id: "",
				quitPopup: false,
				title: '确认删除该地址吗？',
			};
		},
		onShow() {
			this.pageRefresh();
		},
		methods: {
			edit(id) {
				uni.navigateTo({
					url: `./addAddress/addAddress?id=${id}`
				})
			},

			pageRefresh() {
				this.current_page = 1;
				this.last_page = 1;
				this.addressList = [];
				this.getAddressList();
			},

			setDefault(e) {
				const id = e.currentTarget.dataset.id;
				const oldDefault = uni.getStorageSync("defaultAddress");

				if (oldDefault === id) {
					uni.showToast({
						title: "已是默认地址",
						icon: "none"
					});
					return;
				}

				this.defaultAddress = id;
				uni.setStorageSync("defaultAddress", id);

				uni.showToast({
					title: "默认地址已更新",
					icon: "none"
				});
			},

			showModal(e) {
				let id = e.currentTarget.dataset.id;
				this.id = id;
				this.quitPopup = true;
			},
			cancel() {
				this.quitPopup = false;
			},

			del() {
				let that = this;
				apiDelAddress({
					id: that.id
				}).then(res => {
					if (!res.code) {
						uni.$u.toast(res.msg);
						return;
					}
					this.cancel();
					this.pageRefresh();
				}).catch(err => console.log(err))
			},

			// 地址列表
			getAddressList() {
				apiAddressList({
						page: this.current_page
					})
					.then(res => {
						const array = res.data.data;
						array.forEach(element => {
							this.addressList.push(element)
						})

						this.last_page = res.data.last_page;
					}).catch(err => console.log(err))
			},
		},
		onReachBottom() {
			let that = this;
			that.current_page++;
			if (that.current_page > that.last_page) {
				uni.$u.toast("暂无更多~");
				return;
			}
			that.getAddressList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.address_choose_box {
		padding: 24rpx;

		.edit {
			display: flex;
			justify-content: flex-end;
			padding-right: 10px;
		}

		// 渲染收货信息的盒子
		.addressInfoBox {
			justify-content: center;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx;

			.content {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.rowChild:last-child {
				margin-bottom: 0;
			}

			// 第一行
			.rowChild {
				justify-content: space-between;
				margin-bottom: 30rpx;

				.setDefault {
					color: #6b6b6b;
					margin-left: 6px;
				}

				.default {
					width: 80rpx;
					text-align: center;
					font-size: 14px;
					color: #fff;
					border-radius: 4rpx;
					background-color: #007aff;
					padding: 4rpx 4px;
					margin-left: 6px;
				}

				.del {
					width: 38px;
					font-size: 13px;
					text-align: center;
					border-radius: 4px;
					background-color: #e4e4e4;
					padding: 3px 5px;
				}

				.rowChild_left {
					width: 88%;
				}

				.rowChild_head {
					// color: #6b6b6b;

					.username {
						font-weight: 550;
						font-size: 16px;
					}

					.phone {
						font-size: 16px;
						margin-left: 10px;
					}
				}

				.rowChild_foot {
					font-size: 15px;
					margin: 8rpx 0;
				}
			}
		}

		.addressChoose {
			z-index: 3;
			width: 96.4%;
			background-color: #fff;
			padding: 20rpx;
			position: fixed;
			left: 0;
			bottom: 0;

			.btn {
				width: 94%;
				font-size: 30rpx;
				border: none;
				border-radius: 40rpx;
				padding: 6rpx 0;
			}
		}
	}
</style>